Google、ウェブサイトのUX健全性を示すWeb Vitalsを導入。3つの重要指標はLCP/FID/CLS
[レベル: 上級] ウェブで優れたユーザー エクスペリエンスを実現するために “Web Vitals（ウェブ バイタル）” というコンセプトを Google は導入しました。 Web Vitals の土台として次の要素を重要視します。 読み込み時間 インタラクティブ性 ページ コンテンツの視覚的な安定性 それぞれの要素を測定するための指標とツールの提供を始めています。 Core Web Vitals: ウェブに関する 3 つの主な指標 Web Vitals を数値化するために、ウェブに関する特に重要な 3 つの指標を Google は設定しました。 ひっくるめて、“Core Web Vitals”（コア ウェブバイタル）と呼びます。 Largest Contentful Paint (LCP) First Input Delay (FID) Cumulative Layout Shift
NectarJS | NectarJS
NectarJSJavaScript native compiler. No bytecode no VM, just pure native binaries. Performance and SpeedWith NectarJS's AOT compiler, your JavaScript code will outperform all other JavaScript engines and run with its full potential, without any bytecode or VM. One Language for AllWith NectarJS, you can create almost anything, from device drivers to desktop applications, with one language : JavaScri
Node.js開発者が作った新たなJavaScriptランタイム「Deno 1.0」リリース | OSDN Magazine
JavaScriptランタイムエンジン「Deno」の開発チームは5月13日、「Deno 1.0」を公開した。 DenoはJavaScriptエンジンV8をベースとしたランタイム環境。モダンかつセキュアなランタイムと称されている。TypeScriptトランスパイラが内蔵されており、TypeScriptコードの直接実行もサポートする。 Denoを開発したのはNode.jsの開発者としても知られるRyan Dahl氏で、Nodeのアルファベットを入れ替えてDenoとした。「Nodeは2009年に設計され、当時からJavaScriptは進化している」、「Nodeは多くの開発者が使っており、進化のスピードは遅い」とDeno開発チームは記しており、「JavaScriptとその周辺のソフトウェアインフラの状況は変化しており、簡素化が必要だ」とDeno開発の経緯を記している。 WebブラウザなしにJava
PHPとJavaScriptの違いまとめ（主要項目の対比表） - Qiita
*1. let：再宣言NG、const：定数(再宣言・再代入NG) *2. PHP：アロー関数は1行のみ。 JS：複数行OK。代入した変数が関数名になる(phpも)。 *3. JS：super()の引数は親クラスのコンストラクタの引数と合わせる *4. JS：プロパティと呼ぶ *5. PHP：シングルクオテーションだと文字列として出力 JS：バッククオート（shift+@） *6. JS：空の文字列を足すと自動で文字列型に変換 JSはES6からクラスが使えるようになった。PHPと同じ処理で設定されている（クラスの生成、クラスの継承）。 PHPとJSは、PHPとPythonよりも似ている部分が多い。その分ちょっとした違いに注意が必要。（elseif と else ifとか） ＞ご参考：phpとpythonの違いまとめ（対比表）
Azure App Service に Static Web Apps が登場！
Microsoft Build 2020 で、Azure App Service の新たなオプションとして 静的サイトのホスティング を実現する Static Web Apps が発表になりました（執筆時点で Public Preview）。JavaScript で開発する Web フロントエンドのメインストリームである SPA（Single Page Application)）や 静的サイトジェネレータを使う JAMstack の運用に最適化されているそうです。 詳細は 公式アナウンス や 公式ドキュメント: Azure Static Web Apps documentation を読んだ方がいいですが、ざっと現在わかっている機能や特徴を書いておきます。 App Service Static Web Apps の概要App Service Static Web Apps（名前が長いので以
Electron 9.0.0 | Electron
Electron 9.0.0 has been released! It includes upgrades to Chromium 83, V8 8.3, and Node.js 12.14. We've added several new API integrations for our spellchecker feature, enabled PDF viewer, and much more! The Electron team is excited to announce the release of Electron 9.0.0! You can install it with npm via npm install electron@latest or download it from our releases website. The release is packed
君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA
ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？ webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています
App Service Static Web Apps の仕組みを探る（非公式） - しばやん雑記
Build 2020 では App Service に関する話は非常に少なかったですが、唯一大きなリリースとしては Static Web Apps がありました。名前の通り静的コンテンツをホスティングするためのサービスですが、同じドメインで API (Azure Functions) が付いてくるのが特徴です。 詳しくは Daria の公式ブログや三宅さんの記事を読んでおいてください。このエントリではその辺りの紹介は全くしないので、知識がある前提で進めていきます。 自分は Static Web Apps がどのように構築されているのかのが気になるので、現在分かっていて触れる範囲で内部アーキテクチャを探ってみました。当然ながら非公式ですし、正しい保証はありません。 Static Web Apps でお手軽ホスティングしたい人には必要ないエントリです。普通は気にせずに GitHub からサクサ
GitHub - CatchTheTornado/askql: AskQL is a query language that can express any data request
AskQL is the next step after GraphQL and Serverless. With AskQL developers can attach scripts to queries that are executed serverside. The AskQL parser accepts the GraphQL query format so there's no learning curve. Because the scripts are executed serverside and the results can be cached it's great for Web Vitals and app performance. Think of it as a programmable GraphQL. Read a great articly on A
フロントエンドエンジニアなら押さえておきたい！最近登場した注目のJavaScript＆CSSライブラリ8選
Webデザイナーやフロントエンドエンジニアにとって、日々登場するフレームワークやライブラリをキャッチアップすることはとても大切です。 なぜなら、そうしたフレームワークやライブラリによって業務が効率化すれば、他の作業に時間を割くことができるからです。 しかし、フレームワークやライブラリが続々と登場するあまり、キャッチアップに追いついていないひともいるのではないでしょうか。 今回は、最近登場した注目のJavaScriptとCSSのライブラリを紹介していきます。 中には簡単なコードを挿入するだけで驚くほどの機能を実装できるものもあるので、ぜひ確認してみてください。 最近登場した注目のJavaScript＆CSSフレームワーク 1. AOS https://michalsnik.github.io/aos/ AOS(Animate on Scroll)は、スクロールしながら要素をアニメーションでふ
【保存版】Googleの検索順位にも影響があるSEOの基本チェックシート42項目を公開【PDF付き】｜ferret [フェレット]
SEOの効果をあげるためには、やることが多く、慣れていないと考慮漏れが起きてしまいがちです。そこで今回はSEOの基本チェックシートを作成しました。 PDFで無料ダウンロードできるようにしたため、誰でも活用できます。 記事としても項目を記載しますが、項目の説明に関しては資料（PDF）に記載してあり、こちらを読んでいただくと内容が分かるかと思います。 キーワードに関するチェックリスト 検索数の多いキーワードを選んでいるか（同じ意味のキーワードの場合） 自社サイトで提供できる価値にマッチするキーワードを選んでいるか サジェストキーワードをチェックしているか 競合サイトの流入キーワードをチェックしているか コンテンツに関するチェックリスト コンテンツ内容はオリジナルかどうか ページ類似率が高くないか 見出しは内容が分かりやすくなっているか 不自然にSEOキーワードが頻出してい
![【保存版】Googleの検索順位にも影響があるSEOの基本チェックシート42項目を公開【PDF付き】｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a11b4878b7d0fb24e5503fb37bfe45883cc7c73f/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F10460%2Fog_image%2Fdefault-4fa8a0465df283d07a68b82c71ad4f20.png)
Firebase Japan User Group
Firebase Japan User GroupはFirebaseの日本ユーザーグループです。Firebase初心者もガチ勢も誰でも参加できます！私たちはFirebaseを広く使われることを目標に活動しています。
Sassを@importから@useに置き換えるための手引き - kojika17
Sassの@importルールは、廃止されることが予定されています。 @useや@forwardといったルールに置き換わるのですが、これらは全く新しいシステムです。 これらの知見が溜まってきたのでご紹介します。 @import と 新しいモジュールシステム Sassの初期の方から実装されていた@importは、テキスト形式でSassファイルを読み込むための機能です。便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわかりにくい側面がありました。 新しいモジュールシステムは、この問題を解消し、Sassをより柔軟に使用できるようにします。 @importではグローバルに指定されていた変数などは、ファイルごとにカプセル化され、ファイルの内容に基づいて解決できるようになりました。 現在、Dart Sassしか新しいモジュールシステムは使えませんが、Lib
アイコンの管理が簡単に！たくさんのSVGアイコンを一元管理でき、編集もできる無料ツール -SVG Icon manager
SVGアイコンの管理ができ、編集もできる便利な無料ツールを紹介します。 Windows, macOS, Linux対応で、たくさんのSVGアイコンを一元管理できてしまう優れものです。 Norde -SVG Icon manager and editor Nordeの特徴 Nordeのダウンロード・インストール Nordeの使い方 Nordeの特徴 NordeはUIデザイナーもアイコン制作者も、アイコンを扱うすべての人のために構築された無料ツールです。複数のマシンでもアイコンを一元管理できるので、チームで使用するのにも適しています。 Nordeの特徴 SVGアイコンの管理 SVGアイコンをアイコンセット、グループを使用して管理できます。 SVGアイコンの編集 SVGアイコンのカラーやサイズを簡単に編集できます。 SVGアイコンのエクスポート .svg, .png, .jpg, .webp,
HTML5 開発者に便利なツール 14 個
先日 Google+で Addy Osmani 氏が紹介していたオンラインツールが便利そうだったので紹介します。 DocHub.io # CSS, HTML, JavaScript, DOM, jQuery, PHP, Python の API リファレンス。インクリメンタルサーチできるので、開発中は常に開いておきたい。 Dillinger.io # 最近 GitHub 関連で使われるようになって流行り始めた Markdown 記法を、視覚的に確認しながら入力できるツール。Dropbox や GitHub のアカウントで繋ぐと、アップロードできるようです。Mac 用デスクトップアプリの Mou というのも合わせて紹介されていました。 HTML5Please # 今から使える HTML5 機能のリストとブラウザの対応状況に応じたアドバイス、そして Pollyfill (未対応ブラウザ向けに機
便利なツールやWebサービス - JavaScript勉強会
はてなブックマークで便利なWebサービスが話題になっていました。 https://anond.hatelabo.jp/20200525021541 anond.hatelabo.jp 記事のトラックバックやブックマークのコメントが参考になりました。 https://b.hatena.ne.jp/entry/s/anond.hatelabo.jp/20200525021541 b.hatena.ne.jp 知らないツールやWebサービスもあったので、良さそうなのをメモ。 情報収集 ウェブ魚拓 RSSリーダー hckr news ノイズレスサーチ 情報整理 start.me 検索デスク Myfaves IFTTT RAINDROP.io Zotero tagtory 情報交換 IRCCloud Trickle Discord タスク管理 Zenkit Habitify 作業の自動化 Zapie
長野県民の好物「サバ水煮缶の味噌汁」は全国に広めたいうまさだった【フカボリ】 - メシ通 | ホットペッパーグルメ
「地元に帰って、食べたくなるものってありますか？」 そんな質問を、取材で各県人に続けていました。進学や就職で地元を離れてみて、「その地域でしか食べられないもの」に気づくこと、ありますよね。長野県の人に先の質問をしたら、多く返ってきた答えのひとつが「サバとタケノコの味噌汁」。 え、サバを味噌汁に！？ サバはサバでも、サバの水煮缶を使うんですよ。（取材で集めた地元の方の声より。以下同） なんと！ 長野県は内陸地、海に面してないのにサバを使うとは驚きましたが、缶詰だったんですね。たしかに保存がきくもんな。 海なし県だからか、魚への執着はやっぱり強いんですよ。昔からサバの水煮缶はよく料理に使ったし、うちの親は買い置きしてました。ごちそうは必ずお寿司。山の中でもね（笑）。 スーパーのサバ缶の売り場面積、東京はちょっとだけだね。うちのほうはズラッとたっぷり置いてあるよ。 味噌汁にも入れるし、カレーもサ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
tenko ES2020 JavaScriptパーザ
Azure Static Web Apps documentation
#2 僕のJavaScriptの書き方
loading.io - Your SVG + GIF + PNG Ajax Loading Icons and Animation Generator
Firebase Japan User Group – Medium
Flexbox Cheat Site