【まとめ】2022年に話題になったWebサイト - Qiita
はじめに としが明け、2023年になり、2022年を振り帰ったり、今年の目標を立てている頃でしょうか？ みなさんは2022年どんな1年でしたか？ この記事では、2022年に話題になったWebサイトをまとめて、 みなさんの振り返りや今年の目標や勉強することの参考にしてみてはいかがでしょうか？ POLA https://www.pola.co.jp/wecaremore/mothersday/ 母の日に合わせて公開された↑この特設サイトは、スクロールに合わせて、だいぶスムーズに花がアニメーションしていくサイトです。 一回サイトに訪れると、その没入感にサイトから抜け出すタイミングがなくなるでしょう。 Pokémon Online Gallery https://onlinegallery.pokemon.co.jp/ja/ ポケットモンスター スカーレット・バイオレットの発売を記念して公開された
フロントエンドエンジニアが知るべきキャッシュを理解する
キャッシュは、CPUのバスやネットワークなど様々な情報伝達経路において、ある領域から他の領域へ情報を転送する際、その転送遅延を極力隠蔽し転送効率を向上するために考案された記憶階層の実現手段である。(引用: フリー百科事典『ウィキペディア（Wikipedia）』) こんにちは、@kaa_a_zu です。私たちエンジニアは、「キャッシュ」というワードをよく口にしています。それはインフラの設計をしている時かもしれないし、表示されるコンテンツが変わらない時かもしれないし、パフォーマンスの改善をしている時かもしれません。普段何気なく使っている「キャッシュ」とは一体何なのでしょうか。この記事は、そんな「(Webフロントエンドを触るエンジニアが知るべき)キャッシュ」について、どんなものがあるのかがちょっと分かったという状態になることを目的に書いています。
2020年に立ち上げたWebフロントエンド構成の振り返り
こんにちは、よしこです。 株式会社ナレッジワーク というスタートアップで、2020年4月の創業時から一人目のフロントエンドエンジニアをしています。 初期に考えて組み上げたスタックで1年半ほど開発・運用してみて、なかなか快適に日々開発ができているので 新規開発のプロダクト立ち上げ時にどのようにフロントエンドを構築したのか？ 立ち上げから1年以上開発・運用を続けてきた今、それらの選択はどうだったのか？ を記事にして振り返り、公開したいなと思いました。 （プロダクトの内容はステルスで進めていてあまり対外的な発信ができないので、かわりに技術的なところはどんどんオープンにしていきたいなという気持ちがあります） いろいろな項目ごとに振り返りたいので、この記事は各項目を横断するindexとして項目ごとの概要を簡単に説明し、深堀りは項目ごとに追って詳細な記事を書いていく予定です！ 前提 プロダクトとしての
)
floccus bookmarks sync - 異なるWebブラウザ間でブックマークを同期
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webブラウザにはブックマーク機能があります。それは大抵ローカル上に保存されますが、Google Chromeのようにマシン間で同期できるものもあります。しかし、これらは個々のブラウザ特有のもので、異なるブラウザ間では共有できません。 そこで使ってみたいのがfloccus bookmarks syncです。Webブラウザの垣根を越えてブックマークを同期できます。 floccus bookmarks syncの使い方 まずアカウントを作成します。 同期方法はNextcloud、WebDAVそしてGoogle Driveから選択できます。 設定です。 ブックマークしました。 同期されます。 floccus bookmarks syncは暗号化キーを設定します。たとえば秘密鍵などを使えば
全部、完全に商用利用無料！WebのUIデザインに適した1,130種類のSVGアイコン素材 -Glyphs
企業サイトやプロダクトページをはじめ、オンラインショップ、アプリなど、WebのUIデザインに適したSVGアイコンが無料で利用できるGlyphsを紹介します。 アイコンの種類はなんと1,130種類！ アイコンのバリエーションも豊富で、ソリッドやベタ塗りだけでなく、フルカラーも揃っています。もちろん、SVGなのでカラーやサイズなどを簡単に変更できます。 各アイコンは5種類のバリエーションがある Figmaでデザインされた1,000種類を超える編集可能なアイコン。 任意のアプリケーションで使用するためのWebコンポーネント。 FigmaからSVGをダウンロードするためのCLIユーティリティ。 目的のアイコンはフォルダやタグで簡単に検索可能。 ドキュメントとガイドを完備。 ダークモード対応 MITライセンスで、商用プロジェクトでも無料で利用できます。 アイコンの編集も簡単、サイズやカラーの変更だけ
Vue.js、Nuxt JSを学習するときにやったこと
2021年7月11日 JavaScript, Nuxt JS, Vue.js 以前「WebデザイナーのためのVue.js事始め」という記事でVue.jsについて触れたのですが、それから今まで、どんな手順で勉強してきたのかを紹介してみます。途中ReactやGatsbyを取り入れたりもしていたのですが、結局 .vueファイルでの単一ファイルコンポーネントが楽だなーと思い、今はVue.jsに全振り中です。これから勉強してみたい方の参考になれば幸いです。 ↑私が10年以上利用している会計ソフト！ 1. Vue.js公式Webサイトを確認 まずはVue.jsの公式Webサイトを確認。日本語にも対応しています。ここで基本的な使い方、文法、何ができるのかなどをざっくり学習しました。 サンプルコードがある箇所は実際にCodePenを使ってコードを記述し、動作確認します。公式は今後何度も繰り返しチェックする
フロントエンド開発する人が入れているもの(拡張、プラグイン、アプリ、設定など...)
タイトル通りです。 自分が入れてるものを記載していきますが、誰でも投稿できるのでオススメの提供もお待ちしてます！ 私はApple SiliconのMac miniに設定をします。 個人的な好みが入ってしまっている & ご存知のものも多そうですが、思いついたものを遠慮なく挙げてみます！ 開発系 Postman：Web APIのテストにときどき使いますね… Table Plus：最近人気が出てきてそうなSQLクライアント。このあたりは好みによって異なると思いますが、見やすくて個人的に気に入っています。MySQLとPostgreSQLの両方に対応。 その他 clipy：コピペの履歴を取っておいて⌘ + shift + Vで楽に呼び出せて捗ります。 Whimsical：ちょっとした図を書くときに便利です。ブラウザ上でも使えるのですが、デスクトップアプリとして入れておくと開きやすくていい感じ。 Be
Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説
ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。 レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. HTMLの解析（パース）を開始する 2. 外部リソースを取得する 3. CSSを解析し、CSSOMを構築する 4. JavaScriptを実行する 5. DOMとCSSOMをマージしてレンダリングツリーを構築する 6. レイアウトとペイントを計算する はじめに 私の考えとしては、高速で信頼性の高いWebサイトを構築するには、実装中に各ステップを最適
レガシーおじさん、SPAを始めてみた。そして限界を知る
はじめに 最近、Webの記事を見てるとReactだVue.jsばかりが上がっていてJSPやERBの話をしてる人は誰もいません。jQueryの記事ももちろん見ない。 つまり、Webだけ見る限りではほとんどの人がSPAを使ってるように見えます。 私はWeb界隈には居るもののどちらかというとバックエンド寄り、もっというとそもそもWebとか関係ない領域を見る事が多いので、ちょっとキャッチアップを兼ねていくつかの個人プロダクトにVue.jsを採用してみました。 jQueryくらいで頭が止まってたので。サーバサイドもマイクロサービスでAPI化が進んでるのでフロントもそれに合った技術を選ばないとですしね。 というわけで、今回はその中で得た知見というか、従来型のサーバサイドでのWeb開発をしていた人の視点でVue.jsをキャッチアップする流れで書いていきたいと思います。 まあ最終的な結論は正直「これすごく
あなたがまだ使っていないかもしれないHTML5の便利機能10選 - Qiita
こんにちは、たかとーです🧑🎤 こちらは、10 useful HTML5 features, you may not be usingの翻訳記事になります。 当記事は、Tapasさんの許可を得て翻訳しています。Tweet 10 useful HTML5 features, you may not be using HTML5は新しいものではありません。最初のリリース（2008年1月）以来いくつかの機能を使用してきました。100DaysOfCodeの取り組みの一環として、HTML5の機能リストをもう一度よく見てみました。何か見つけたかな？私は今のところあまり使っていません。 この記事では、過去にあまり使ったことがなかったが、今では便利になったHTML5の機能を10個挙げています。また、Netlifyでホストされている、実際に動作する例を作成しました。参考になることを願っています。 htt
表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse
一般的な Web アプリケーション アーキテクチャ - .NET
このコンテンツは eBook の「ASP.NET Core および Azure での最新の Web アプリケーションの設計」からの抜粋です。.NET Docs で閲覧できるほか、PDF として無料ダウンロードすると、オンラインで閲覧できます。 "優れたアーキテクチャが高価であると思うならば、不完全なアーキテクチャを試してみてください。" - Brian Foote と Joseph Yoder 従来の .NET アプリケーションのほとんどは、実行可能ファイルに対応する単一のユニットとして、または 1 つの IIS appdomain 内で実行される単一の Web アプリケーションとして展開されます。 この方法は最も簡単な展開モデルであり、多くの内部的アプリケーションおよび小さなパブリック アプリケーションに適切に対応します。 ただし、このように単位ユニットとして展開されても、重要なビジネス
Font Awesome(Webアイコンフォント)の使い方まとめ＋コピペ。WordPressでも使える！ | KodoCode
アイコン素材の革命「Font Awesome(フォントアワサム)」の設定・使い方・コピペ実装参考サイトをまとめました。アイコン素材を使いたい場合、無料素材画像をフリー素材サイトからダウンロードして使う人も多いのではないかと思います。 面倒な手続きなしですぐに使え、著作権表記がキチンとしていて安心して使えるフリーアイコン素材サイトは以下記事で紹介しています。 一方で、このような画像タイプのアイコン素材にはデメリットもあります。 アイコンの色や大きさを簡単に変更できない(画像自体を修正する必要がある)ページを拡大すると荒くなって見た目が悪くなる そこで近年頻繁に使われるようになったものが「Webアイコンフォント」です。 Webアイコンフォントならば、文字フォントと同じ感覚でアイコンを使うことができ、CSSの設定で簡単に色やサイズを変えることができます。 「Font Awesome」とは、Web
2022年版：おすすめのWebアイコンフォントサービス10選 | Web Design Trends
Webアイコンフォントを利用することで、数千種類のアイコン素材をWebサイト上で簡単に表示することができます。 Webサイト上で多くの画像ファイルを読み込むとページの表示速度に影響してしまいますが、Webアイコンフォントであればファイルサイズをほとんど気にせず利用することができます。 今回は、Webアイコンフォントの基本と、2022年現在のおすすめWebアイコンフォントサービスをご紹介したいと思います。 【2023】無料で使えるフリーアイコン素材サイト25個まとめ【商用利用OK】 アイコン素材はWebデザインのあらゆる場所で活用することができます。ボタンやリストの見出し、ラベルなどにアイコン素材を取り入れれば、より使いやすくデザインも優れたWebサイトを作ることができますね。 ... Web Design Trends Webアイコンフォントとは Webアイコンフォントとは、HTMLのタグ
PWAの作り方をサクッと学ぶ - 「ホーム画面に追加」「キャッシュ操作」「プッシュ通知」の実装 - エンジニアHub｜Webエンジニアのキャリアを考える！
PWAの作り方をサクッと学ぶ - 「ホーム画面に追加」「キャッシュ操作」「プッシュ通知」の実装 PWAをテーマにしたコミュニティ「PWA Night」を運営する菅家大地さんが、既存のWebアプリをPWA化する簡単な実装方法を解説します。 はじめまして、菅家（@kan_dai）といいます。普段は株式会社TAMという会社でフロントエンドをメインに、クライアントのWebサイト制作やWebサービスの開発をしています。PWA（Progressive Web Apps）をテーマにしたコミュニティ「PWA Night」の運営もしています。 さて、2018年ごろからPWAという言葉を聞く機会が多くなってきました。2019年現在、毎月コンスタントにPWAに関する仕事の相談を受けるようになっており、PWAへの関心の高まりを感じます。日本経済新聞やスマートフォン版Yahoo! Japanといった有名サービスでの
AMPを「高速化技術」「一瞬で表示する技術」というのはもうやめよう。｜榊原昌彦
AMP（Accelerated Mobile Pages）がオープンソースとして立ち上げられてから数年が経ちました。食べログなどの大手Webサービスが対応し、また簡単にAMP対応できるWordPressプラグインが出たことで、今では一般に浸透してきた感じを持っています。 ただ「表示高速化技術」「一瞬で表示する技術」というのは正しくないのでやめませんか？ AMPはWeb Componentsフレームワークまず誤解されがちなのですが、AMPは新たな技術ではなく、Web標準の「Web Components」というAPIを用いて実装されています。AMPのGitHubページにもしっかりと「The AMP web component framework.」（AMPというWeb Componentsを用いたフレームワーク」と掲載されています。 Web Componentsは、再利用可能でカプセル化された
Ionicでのアプリ開発の始め方 - Qiita
Ionicとは? Ionicとは、Google社のAngularというアプリケーションフレームワークをベースに、HTML5アプリの開発に特化して作られたJavaScriptフレームワークです。 Build amazing apps in one codebase, for any platform, with the web. （公式サイトより） とあるように、Web/iOS/Android アプリが全て同時に開発できる、いわゆるハイブリッド開発ができる優れものです。1 また、近年Webをアプリとして便利にするPWA(Progressive Web Apps)という仕組み2も誕生しましたが、IonicはこのPWAにも標準でサポートしています。 Ionicの始め方 とりあえず手元で始める場合は、以下の手順で始められます。 1.Node.jsをインストール 2.Ionic, Cordovaを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Services Internationalization Usage Scenarios
The Evolution of Web protocols
【魚拓】Webエンジニア業界に感じた違和感 - Qiita
